<script setup lang="ts">
const onClickLeft = () => history.back();
import {articleContent} from "@/http/home";
import {useRoute} from "vue-router";
import {ref} from "vue";

// 接收跳转传参
const route = useRoute()
const id = route.query.id

let articleList = ref<any[]>([])

articleContent({pageSize:10,pageNum:1,teacherId:id}).then(res=>{
    console.log(res)
    if (res.code==200){
        articleList.value=res.rows
    }
})

let baseUrl = 'http://192.168.5.120:8090'
</script>

<template>
<div>
    <van-nav-bar
        :fixed=true
        :placeholder=true
        title="文章"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="textSection">
        <div class="text">
            <div class="each" v-for="item in articleList" :key="item.id">
                <div class="pic">
                    <img :src="baseUrl+item.titlePicture"
                         alt="文章封面">
                </div>
                <div class="recommend">
                    <h3>{{item.title}}</h3>
                    <div class="hot"><van-icon name="fire-o" />
                        <span>{{item.readers}}已读</span></div>
                    <div class="time"><van-icon name="clock-o" />
                        <span>{{item.sendTime}}</span></div>
                </div>
            </div>
        </div>
    </div>

</div>
</template>

<style scoped lang="less">
.each {
    width: 92%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;

    .pic {
        width: 34%;
        height: 12vh;

        img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
        }
    }
    .recommend {
        width: 62%;
        h3 {
            margin: 0 0 3vh;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .hot,.time {
            color: darkgray;
            font-weight: 600;
            span {
                margin-right: 8px;
            }
        }
    }
}
</style>